
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>开班计划列表</title>
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/list.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/st.css')}}">
	<script src="{{URL::asset('js/jquery.min.js')}}"></script>
	<script src="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
	<style media="screen">
		.el-button--text {
			padding: 0 5px;
		}
	</style>
</head>
<body style="padding:30px;background-color:#F3F3F4;">
<div id="main">
	<el-card class="search-tool-box">
		<el-collapse v-model="open_tool_box">
			<el-collapse-item name="true">
				<template slot="title">
					<h4 style="text-indent:2rem;">查询工具栏</h4>
				</template>
				<el-form inline :model="seaForm" label-width="100px" class="seaForm">
					<el-form-item label="开班段">
						<el-date-picker style="width:171px;"
							v-model="seaForm.year" align="right" type="year"
							placeholder="开班年份" clearable value-format="yyyy">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="校区">
						<el-select filterable v-model="seaForm.campus" placeholder="请选择">
							<el-option v-for="opt in initData.campuses"
								:label="opt.name" :key="opt.id" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班型">
						<el-select filterable v-model="seaForm.class_type" placeholder="请选择">
							<el-option v-for="opt in initData.class_type"
								:label="opt.name" :key="opt.id" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班段">
						<el-select filterable v-model="seaForm.class_stage"
						  placeholder="请选择">
							<el-option v-for="(opt,key) in initData.class_stage" :label="opt.name" :key="key" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="分组">
						<el-select filterable v-model="seaForm.class_group" placeholder="请选择">
							<el-option v-for="opt in initData.class_group"
								:label="opt.name" :key="opt.id" :value="opt.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班号">
						<el-input v-model="seaForm.no"></el-input>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="doSearch"
							icon="el-icon-search" plain>
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</el-card>
	<hr>
	<el-card class="table-box">
		<div slot="header" class="el-card-header" align="right">
			<div class="btn-group">
				<el-button-group>
					<button type="button" class="el-button el-button--primary el-button--small is-plain " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="el-icon-download"></i>导出 <span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li @click="dataExport('selected')">导出选中</li>
						<li @click="dataExport('all')">导出全部</li>
					</ul>
					<el-button plain size="small" icon="el-icon-refresh"
						@click="getTableData" type="info">
						刷新
					</el-button>
					<el-button plain size="small" icon="el-icon-plus"
						@click="addRow" type="success">
						新增
					</el-button>
					<el-button plain size="small" icon="el-icon-delete"
						@click="destroy" type="danger">
						删除
					</el-button>
				</el-button-group>
			</div>
		</div>
		<div class="el-card-body">
			<el-table :data="table.data" border @sort-change="reSort"
				v-loading.fullscreen.lock="table.loading" @selection-change="handleSelectionChange">
				<el-table-column align="center" prop="id" type="selection" width="55">
				</el-table-column>
				<el-table-column align="center" prop="k" label="序号" sortable>
				</el-table-column>
				<el-table-column align="center" prop="campus_name" label="校区" sortable>
				</el-table-column>
				<el-table-column align="center" prop="type_name" label="班型" sortable>
				</el-table-column>
				<el-table-column align="center" prop="stage_name" label="班段" sortable>
				</el-table-column>
				<el-table-column align="center" prop="group_name" label="分组" sortable>
				</el-table-column>
				<el-table-column align="center" prop="no" label="班号" sortable>
				</el-table-column>
				<el-table-column align="center" prop="tutor" label="班主任" sortable>
				</el-table-column>
				<el-table-column align="center" label="年度季度">
					<template slot-scope="scope">
						@{{scope.row.year}} - @{{scope.row.season}}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="batch" label="批次">
				</el-table-column>
				<el-table-column align="center" prop="total" label="计划人数" width="80">
				</el-table-column>
				<el-table-column align="center" prop="sex_rate" label="性别比例(男/女)" width="120">
				</el-table-column>
				<el-table-column align="center" prop="lvl_rate" label="等级比例(A/B/C/D)" width="140">
				</el-table-column>
				<el-table-column align="center" label="人数" width="50">
					<template slot-scope="scope">
						<el-button v-if="scope.row.st_count > 0" type="text" @click="showST(scope.row)">@{{scope.row.st_count}}</el-button>
						<span v-else>@{{scope.row.st_count}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="编辑">
					<template slot-scope="scope">
						<el-button type="success" icon="el-icon-edit-outline"
						@click="editRow(scope.row)" size="small" plain circle>
					</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				align="right"
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="seaForm.page.pageNumber"
				:page-sizes="[10, 25, 50]"
				:page-size="seaForm.page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="seaForm.page.total">
			</el-pagination>
		</div>
	</el-card>
</div>
</body>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		selected_ids:[],
		open_tool_box:"false",
		initData:{
			campuses:[],
			class_stage:[],
			class_type:[],
			class_group:[],
		},
		seaForm:{
			year:"",
			campus:"",
			class_type:"",
			class_stage:"",
			class_group:"",
			no:"",
			_token:"{{csrf_token()}}",
			sort:{
				sortBy:"id",
				orderBy:"desc",
			},
			page:{
				pageSize:10,
				pageNumber:1,
				total:0
			}
		},
		table:{
			loading:false,
			data:[]
		}
	},
	mounted:function() {
		this.getInitData();
		this.getTableData();
	},
	methods:{
		getInitData() {
			let url = "{{URL::asset('admin/consultation/newclass/get_seaform_opt')}}";
			$.get(url,function(res) {
				main.initData =	res.data;
			});
		},
		getTableData() {
			let url = "{{URL::asset('admin/consultation/newclass/get_table_data	')}}";
			let param = this.seaForm;
			$.get(url,param,function(res){
				main.table.data = res.data.rows;
				main.seaForm.page.total = res.data.total;
			});
		},
		doSearch() {
			this.open_tool_box = "false";
			this.seaForm.page.pageNumber = 1;
			this.getTableData();
		},
		reSort(col) {
			if(col.prop == "k"){
				col.prop = "id"
			}
			if(col.prop == "campus_name"){
				col.prop = "campus"
			}
			if(col.prop == "type_name"){
				col.prop = "type"
			}
			if(col.prop == "group_name"){
				col.prop = "group"
			}
			if(col.prop == "stage_name"){
				col.prop = "section"
			}
			if(col.prop){
				this.seaForm.sort.sortBy = col.prop;
				if(col.order == "ascending"){
					this.seaForm.sort.orderBy = "asc";
				}else{
					this.seaForm.sort.orderBy = "desc";
				}
			}else{
				this.seaForm.sort.sortBy = "id";
				this.seaForm.sort.orderBy = "desc";
			}
			this.doSearch();
		},
		pageSizeChange(val) {
			this.seaForm.page.pageSize = val;
			this.seaForm.page.pageNumber = 1;
			this.getTableData();
		},
		curPageChange(val) {
			this.seaForm.page.pageNumber = val;
			this.getTableData();
		},
		checkSelectedIds() {
			if(this.selected_ids.length < 1){
				this.$notify.error({title:"Error",message:"请至少选择一条数据进行操作"});
				return true;
			}
			return false;
		},
		handleSelectionChange(val) {
			let length = val.length;
			this.selected_ids = [];
			for(let i=0;i<length;i++){
				this.selected_ids.push(val[i].id)
			}
		},
		dataExport(t){

		},
		editRow(row) {
			window.location.href = "{{URL::asset('admin/consultation/newclass/edit')}}/" + row.id;
		},
		addRow() {
			let url = "{{URL::asset('admin/consultation/newclass/create')}}";
			window.location.href = url;
		},
		destroy() {
			if(this.checkSelectedIds()) {
				return false;
			}
			let url = "{{URL::asset('admin/consultation/newclass/destory')}}";
			let param = {
				_token:"{{csrf_token()}}",
				ids:this.selected_ids
			};
			$.post(url,param,function(res){
				if(res.code == 1){
					main.$notify({title:"Success",type:"success",message:res.msg});
					main.getTableData();
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			})
		},
		showST(row) {
			console.log(row)
		}
	}
})
</script>
</html>
